<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="preview/css/reset.css" />
		<link rel="stylesheet" href="preview/css/index.css" />
		<title>大数据单模块-借还书系统</title>
	</head>

	<body>
		<div class="borrow starModule">
			<div class="sxTitle">借还书系统</div>
			<div class="borrow-content sxBgBorder">
				<div class="sxCorner"></div>
				<div class="sxCorner"></div>
				<div class="sxCorner"></div>
				<div class="sxCorner"></div>
				<div class="borrow_today ycenterbox">
					<p class="borrow_des">今日借阅</p>
					<p><span id="borrow_todayNum"></span><small>册</small></p>
				</div>
				<div class="borrow_week ycenterbox">
					<p class="borrow_des">本周借阅</p>
					<p><span id="borrow_weekNum"></span><small>册</small></p>
				</div>
				<div class="borrow_total ycenterbox">
					<p class="borrow_des">累计借还量</p>
					<p><span id="borrow_totalNum"></span><small>册</small></p>
				</div>
				<div id="chart"></div>
			</div>
		</div>
	</body>
	<script src="preview/js/jquery.min.js"></script>
	<script src="preview/js/rem.js"></script>
	<script src="preview/js/browser.js"></script>
	<script src="preview/js/requestAnimationFrame.js"></script>
	<script src="preview/js/prefixfree.min.js"></script>
	<script src="preview/js/echarts.js"></script>
	<script src="preview/js/countUp.js"></script>
	<script>
		var option = null,
			currentFontSize,
			myChart = null,
			chart_timer = null,
			chartCountNum= 0,
			outByDay=41325,
			outByWeek=41526366,
			outByAll=125635623562,
			borrowSpaceTime=15,
			borrowHz=myexplorer(),
		    options = {
				separator: '', // character to use as a separator
//            suffix: '', // optional text after the result
			},
			lastBorrow,
			lastReturn;

		window.onresize= function() {
			currentFontSize = getRem(100, 793);
			////初始化执行一遍动效
			borrow_num_move();///数字动效
			initChart();///图表动效
			////调用不断执行动效函数 15秒执行一次
			chart_move();
		};
		window.onload  = function() {
			currentFontSize = getRem(100, 793);
		};
		//数字滚动动效
		function borrow_num_move() {
				new CountUp($("#borrow_todayNum"), 0, outByDay, 0, 4,options).start();
				new CountUp($("#borrow_weekNum"), 0, outByWeek, 0, 4,options).start();
				new CountUp($("#borrow_totalNum"), 0, outByAll, 0, 4,options).start();
		}
		//曲线图动效函数
		function getOption() {
			return {
				title: {
					text: '借出、还入曲线图',
					textStyle: {
						color: '#8fa1ba',
						fontSize: 18 * currentFontSize / 100,
					},
					padding: [0, 0, 0, 20 * currentFontSize / 100]
				},
				tooltip: {
					trigger: 'axis',
					show: false
				},
				legend: {
					data: ['借出', '还入'],
					x: 'right',
					itemWidth: 12 * currentFontSize / 100, // 图例图形宽度
					itemHeight: 12 * currentFontSize / 100,
					textStyle: {
						color: '#98a8c2',
						fontSize: 14 * currentFontSize / 100,
					},
					padding: [5 * currentFontSize / 100, 30* currentFontSize / 100,0,0]
				},
				grid: {
					x: '8%',
					x2: '1%',
					y: '16.6%',
					y2: '18%'
				},
				color: ['#2ed15f ', '#bed20e'], ///借出还入曲线颜色
				calculable: true,
				xAxis: {
					type: 'category',
					boundaryGap: true,
					axisLine: {
						lineStyle: {
							color: '#404155',
							width: 1 * currentFontSize / 100
						},
						onZero: true
					},
					splitLine: {
						show: false,
						lineStyle: {
							color: 'rgba(96,118,173,0.3)'
						},
					},
					axisLabel: {
						interval: 0,
						textStyle: {
							color: '#98a8c2',
							fontSize: 14 * currentFontSize / 100,
						}
					},
					data: [
						"8:00",
						"9:00",
						"10:00",
						"11:00",
						"12:00",
						"13:00",
						"14:00",
						"15:00",
						"16:00",
						"17:00",
						"18:00"
					],
				},
				yAxis: [{
					type: 'value',
					axisLine: {
						lineStyle: {
							color: '#404155',
							width: 1 * currentFontSize / 100
						}
					},
//					boundaryGap: true,
					splitLine: {
						lineStyle: {
							color: 'rgba(96,118,173,0.3)'
						}
					},
					axisLabel: {
						show: true,
						formatter: '{value}',
						textStyle: {
							color: '#98a8c2',
							fontSize: 14 * currentFontSize / 100,
						}
					}
				}],
				series: [
					{
						name: '借出',
						type: 'bar',
						barWidth: 10 * currentFontSize / 100,
						barGap:'30%',
						label: {
							normal: {
								show: false,
//								formatter: '{c}\n',
								position: 'top',
//								color:'#2ed15f',
								color:'#FFF',
								textStyle: {
									fontSize: 14 * currentFontSize / 100,
								}
							}
						},
						animationDelay: function(idx) {
							return idx * 10 + 100;
						},
						itemStyle: {
							normal: {
								lineStyle: {
//									type: 'solid'
								}
							}
						},
						data:[ 123,253,356,456,555,666,777,888,999,1000,1200]
					},
					{
						name: '还入',
						type: 'bar',
						barWidth: 10 * currentFontSize / 100,
						barGap:'30%',
						label: {
							normal: {
								show: false,
								position: 'top',
								distance:0,
//								formatter: '{c}\n',
//								color:'#bed20e',
								color:'#FFF',
								textStyle: {
									fontSize: 14 * currentFontSize / 100
								}
							}
						},
						animationDelay: function(idx) {
							return idx * 10 + 100;
						},
						itemStyle: {
							normal: {
								lineStyle: {
//									type: 'solid'
								}
							}
						},
						data:[223,353,456,556,655,766,877,988,1099,1100,1200]
			},
				]
			};
		}
		function initChart() {
			if(!!myChart) myChart.dispose();
			myChart = echarts.init(document.getElementById('chart'));
			myChart.setOption(getOption(),true);
		}
		function chart_move(){
			if(!!window.chart_timer)	cancelAnimationFrame(window.chart_timer);
			if(chartCountNum >= (borrowSpaceTime*borrowHz)){///15秒重复一次动效
				chartCountNum = 0;
				initChart();
				borrow_num_move();

			}
			chartCountNum++;
			window.chart_timer = requestAnimationFrame(chart_move);
		}
	</script>

</html>